<template>
  <!-- 乐谱详情卡片 -->
  <div class="notation-detail">
    <!-- 上方乐谱名字信息 -->
    <el-card class="notation-title-card">
      <h2 class="notation-title">{{ notation.name }}</h2>
    </el-card>

    <!-- 中间乐谱图片 -->
    <el-card class="notation-image-card">
      <el-image :src="'http://localhost:8080/images/upload/' + notation.notation_image"
        :preview-src-list="['http://localhost:8080/images/upload/' + notation.notation_image]" fit="cover"
        class="notation-image" />
    </el-card>


    <!-- 下方乐谱信息 -->
    <el-card class="notation-info-card">
      <div class="info-container">


        <div class="info-item">
          <strong>作词：</strong>{{ notation.author_word }}
        </div>
        <br>
        <div class="info-item">
          <strong>作曲：</strong>{{ notation.author_song }}
        </div>


        <br>
        <div class="info-item">
          <strong>类型：</strong>{{ notation.type }}
        </div>
        <br>
        <!-- 下载按钮 -->
        <div class="info-item">
          <el-button type="primary" @click="downloadImage">
            <span>下载</span>
          </el-button>



          <!-- 收藏按钮 -->
          <div class="info-item">
            <el-button type="warning" @click="toggleFavorite">
              <span>{{ isCollected ? "已收藏" : "收藏" }}</span>
            </el-button>
          </div>

          <!--浏览量-->
          <div class="info-item">
            <strong>浏览量：</strong>{{ notation.view_count }}
          </div>

        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";

export default {
  props: ["id"],
  data() {
    return {
      notation: {
        name: "",
        type: "",
        author_song:"",
        author_word:"",
        cover_image: "",
        view_count: "",
        download_count: "",
      },
      isCollected: false, // 是否已收藏
    };
  },
  created() {
    this.fetchNotationDetail();
    this.checkIfCollected();
  },
  methods: {
    fetchNotationDetail() {
      axios
        .get(`/v1/notation2/${this.id}`)
        .then((response) => {
          this.notation = response.data;
          // 调用后端接口更新浏览量
          this.incrementViewCount();
        })
        .catch((error) => {
          console.error("获取乐谱详情失败：", error);
        });
    },

    incrementViewCount() {
      axios.post(`/v1/notation/View/${this.id}`).then(response => {
        // 更新浏览量
        this.notation.view_count += 1;
      }).catch(error => {
        console.error('浏览量更新失败：', error);
      });
    },


    checkIfCollected() {
      const userId = sessionStorage.getItem("user_id");
      if (!userId) {
        console.warn("未登录用户，无法查询收藏状态");
        return;
      }
      axios
        .get(`/v1/check`, {
          params: { userId, notationId: this.id },
        })
        .then((response) => {
          this.isCollected = response.data.collected;
        })
        .catch((error) => {
          console.error("检查收藏状态失败：", error);
        });
    },
    toggleFavorite() {
      const userId = sessionStorage.getItem("user_id");
      if (!userId) {
        ElMessage.warning("请先登录后再进行收藏操作！");
        return;
      }
      const url = this.isCollected ? `/v1/delete` : `/v1/add`;
      const data = { user_id: userId, notation_id: this.id };
      axios({
        method: this.isCollected ? "delete" : "post",
        url,
        data,
      })
        .then((response) => {
          if (response.data.success) {
            this.isCollected = !this.isCollected;
            const message = this.isCollected ? "收藏成功" : "取消收藏成功";
            ElMessage.success(message);
          } else {
            ElMessage.error("操作失败，请稍后再试！");
          }
        })
        .catch((error) => {
          console.error("收藏操作失败：", error);
          ElMessage.error("网络错误，请稍后重试！");
        });
    },
    downloadImage() {
      const link = document.createElement("a");
      link.href = `http://localhost:8080/images/upload/${this.notation.notation_image}`;
      link.download = this.notation.notation_image;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      ElMessage.success("图片已开始下载");
    },
  },
};
</script>

<style scoped>
/* 整体布局样式 */
.notation-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

/* 上方标题卡片 */
.notation-title-card {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.notation-title {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

/* 中间图片卡片 */
.notation-image-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  overflow: hidden;
}

.notation-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 下方信息卡片 */
.notation-info-card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.info-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
}

.info-item {
  font-size: 16px;
  display: flex;
  align-items: center;
  margin: 0 10px;
}

.info-item strong {
  margin-right: 5px;
}

.info-item .el-button {
  margin-left: 10px;
  display: flex;
  align-items: center;
}
</style>
